import React, { ReactNode } from 'react';
import './index.scss';

interface IVEchartsWrapperProps {
  title: ReactNode;
  echartsNode: {
    component: React.ComponentType;
    wrapperComp?: React.ComponentType;
  }[];
}

class VEchartsWrapper extends React.Component<IVEchartsWrapperProps> {
  render() {
    const { title, echartsNode } = this.props;
    return (
      <div className="v-echarts-wrapper">
        <div className="v-echarts-wrapper-header">
          <h3>{title}</h3>
        </div>
        <div className="v-echarts-wrapper-main">
          {echartsNode.map(config => {
            const Charts = config.component;
            const Wrapper = config.wrapperComp;
            return Wrapper ? (
              <Wrapper>
                <Charts />
              </Wrapper>
            ) : (
              <Charts />
            );
          })}
        </div>
      </div>
    );
  }
}

export default VEchartsWrapper;
